<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<span id="result">

</span>
</body>
<script>
    setInterval(function () {
        var result = document.querySelector("#result");
        var date = new Date();
        var year = String(date.getFullYear());
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        var yearImg = "";
        for (var i = 0; i < year.length; i++) {
            var code = year.charAt(i);
            yearImg += '<img src="img/' + code + '.png"/>'
        }
        result.innerHTML = yearImg + ":" + translateImgByNumber(month) + ":" + translateImgByNumber(day) + ":" + translateImgByNumber(hour) + ":" + translateImgByNumber(min) + ":" + translateImgByNumber(sec);
    }, 1000)


    function translateImgByNumber(sec) {
        return sec > 9 ? "<img src='img/" + parseInt(sec / 10) + ".png'><img src='img/" + sec % 10 + ".png'>" : "<img src='img/0.png'><img src='img/" + sec + ".png'>";
    }


    //  result.innerHTML = '    <img src="img/1.png"/>';
    //result.innerHTML = "<br/>"

</script>
</html>